<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <!-- #ifndef MP-WEIXIN -->
    <template #navbar>
      <uv-navbar :fixed="true" leftIcon="arrow-left" :placeholder="true" :title="$Route?.meta?.navigationBar?.titleText" @leftClick="navigateBack">
        <template #right> <view class="submit" @click="submit">保存</view> </template>
      </uv-navbar>
    </template>
    <!--  #endif -->
    <view :class="[`${prefixCls}-email-container`]">
      <uv-input placeholder="未填写" border="surround" v-model="value" clearable>
        <!-- #ifdef MP-WEIXIN -->
        <template v-slot:suffix>
          <view class="submit" style="font-size: 12px; padding: 0 10px; text-align: center" @click="submit">保存</view>
        </template>
        <!--  #endif -->
      </uv-input>
    </view>
  </cu-layout>
</template>

<script>
import { customerUpdate } from '@/api/user'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'email',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      value: '',
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['userInfo']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    const { e_mail } = this.userInfo
    this.value = e_mail
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    navigateBack() {
      uni.navigateBack(1)
    },
    async submit() {
      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
      if (!emailRegex.test(this.value)) {
        uni.$uv.toast('邮箱格式不正确!')
        return false
      }
      const { data, errcode } = await customerUpdate({ e_mail: this.value })
      if (errcode === 0) {
        uni.$uv.toast('更新成功!')
        this.navigateBack()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.submit {
  color: $uv-primary;
}
.#{prefixCls('email-container')} {
  position: relative;
  // background: #f2f6f7;
  padding: 40rpx;
  box-sizing: border-box;
}
</style>
